<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>

        <style>
        .wrapround{
            border: 1px solid silver;
            border-radius: 9px 9px 9px 9px;  
            height: 470px;
            margin: 0 auto;
            width: 708px;
        }
        
        .wraproundx{
            width:708px;
            height:470px;
            overflow: hidden;
        }
        
        .circle {
            border: 0px;
            border-radius: 50%;
            cursor: pointer;
            display: block;
            height: 60px;
            outline: 0 none;
            position: absolute !important;
            width: 60px;
            z-index: 9999;
            visibility:hidden;
        }
        
        .circle:hover{
            opacity: .8;
        }
        
        #main{
            left:300px;
            top:200px;
            width: 62px;
            height: 62px;
            background-color:yellow;	
        }
        </style>
    </head>

    <body>
        <div class="wrapround">
            <div class="wraproundx">
                <div id="main" class="circle"></div>
            </div>
        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
        <script type="text/javascript" src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.9-all-min.js"></script>
        <script>

            jsPlumb.ready(function () {    
                
                $('.wraproundx').droppable({
                    tolerance : 'fit'
                });
                
                $('.circle').droppable({
                    greedy : true,
                    tolerance : 'touch',
                    drop : function (event, ui) {
                        ui.draggable.draggable('option', 'revert', true);
                    }
                });
                
            // jsPlumb stuff -----------------------------------------------------------------    
                
                // set some defaults
                jsPlumb.importDefaults({
                    Anchor:"Continuous",
                    Connector:"Straight",
                    ConnectionsDetachable:false,
                    Endpoint:["Dot", { radius : 5 } ]
                });
                 
                // calculate dynamic anchors that will approximate a circle. vary 'anchorCount' to play with the smoothness vs speed tradeoff.
                var anchorCount = 40,
                    calcAnchors = function() {
                        var r = 0.5, step = Math.PI * 2 / anchorCount, current = 0, a = [];
                        for (var i = 0; i < anchorCount; i++) {
                            var x = r + (r * Math.sin(current)),
                                y = r + (r * Math.cos(current));                                
                            a.push( [ x, y, 0, 0 ] );
                            current += step;
                        }
                        return a;
                    };
                jsPlumb.Defaults.Anchor = calcAnchors();
                
                // helper function to establish a connection from 'main' to some child
                var _connect = function(target) {
                    jsPlumb.connect({
                        source : "main",
                        target : target,
                        paintStyle : {
                            lineWidth : 2,
                            strokeStyle : target
                        }        
                    });    
                };
                
                var nodes = [
                    [ "purple", 307, 298 ],
                    [ "red", 206 , 215 ],
                    [ "silver", 256, 114 ],
                    [ "green", 376, 129 ],
                    [ "blue", 401, 213 ],
                    [ "black", 350, 250 ]
                ];
                    
                var container = $(".wraproundx");
                for (var i = 0; i < nodes.length; i++) {
                    var e = $("<div class='circle child' id='" + nodes[i][0] + "' style='background-color:" + nodes[i][0] + ";left:" + nodes[i][1] + "px;top:" + nodes[i][2] + "px;'></div>");
                    container.append(e);
                    _connect(nodes[i][0]);
                }
                
                 // use jsPlumb to make things draggable; then you don't have to have all those callbacks.
                // note here i make 'child' draggable, not 'circle', so we don't have to disable 'main' afterwards.
                jsPlumb.draggable($(".child"), {
                    containment:".wraproundx",
                    revert : function (socketObj) {
                        if (socketObj === false) {
                            // Drop was rejected, revert the helper.
                            return true;
                        } else {
                            // Drop was accepted, don't revert.
                            return false;
                        }
                    },
                    stop : function () {
                        $(this).draggable('option', 'revert', 'invalid');
                    },
                    start : function (event, ui) {
                        $(this).draggable('option', 'revert', false);
                    }
                });
                
                
            // end jsPlumb stuff -----------------------------------------------------------------    
                
                
                $('.wraproundx').css('position', 'relative');
                $('.circle').css('visibility', 'visible');
                
            });

        </script>
    </body>
</html>